<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<script src="/webjars/jquery/jquery.min.js"></script>
	<script src="/webjars/sockjs-client/sockjs.min.js"></script>
	<script src="/webjars/stomp-websocket/stomp.min.js"></script>
	<script src="/bingo/index.js"></script>
	<title>Bingo</title>
</head>
<body>
<h1 class="heading">请点击空白方格选择你喜欢的城市</h1>
<table align="center">
	<thead>
	<tr>
		<th style="color: #6699ff">B</th>
		<th style="color: #ff99ff">I</th>
		<th style="color: #6699ff">N</th>
		<th style="color: #f9d506">G</th>
		<th style="color: #ff99ff">O</th>
	</tr>
	</thead>



	<tbody id="wholearea">
	<tr>
		<td id="square0" onclick="colorToggle(id)" class=""><span id="0"></span></td>
		<td id="square5" onclick="colorToggle(id)" class=""><span id="5"></span></td>
		<td id="square10" onclick="colorToggle(id)" class=""><span id="10"></span></td>
		<td id="square14" onclick="colorToggle(id)" class=""><span id="14"></span></td>
		<td id="square19" onclick="colorToggle(id)" class=""><span id="19"></span></td>
	</tr>
	<tr>
		<td id="square1" onclick="colorToggle(id)" class=""><span id="1"></span></td>
		<td id="square6" onclick="colorToggle(id)" class=""><span id="6"></span></td>
		<td id="square11" onclick="colorToggle(id)" class=""><span id="11"></span></td>
		<td id="square15" onclick="colorToggle(id)" class=""><span id="15"></span></td>
		<td id="square20" onclick="colorToggle(id)" class=""><span id="20"></span></td>
	</tr>
	<tr>
		<td id="square2" onclick="colorToggle(id)" class=""><span id="2"></span></td>
		<td id="square7" onclick="colorToggle(id)" class=""><span id="7"></span></td>
		<td id="free"><span>杭州</span></td>
		<td id="square16" onclick="colorToggle(id)" class=""><span id="16"></span></td>
		<td id="square21" onclick="colorToggle(id)" class=""><span id="21"></span></td>
	</tr>
	<tr>
		<td id="square3" onclick="colorToggle(id)" class=""><span id="3"></span></td>
		<td id="square8" onclick="colorToggle(id)" class=""><span id="8"></span></td>
		<td id="square12" onclick="colorToggle(id)" class=""><span id="12"></span></td>
		<td id="square17" onclick="colorToggle(id)" class=""><span id="17"></span></td>
		<td id="square22" onclick="colorToggle(id)" class=""><span id="22"></span></td>
	</tr>
	<tr>
		<td id="square4" onclick="colorToggle(id)" class=""><span id="4"></span></td>
		<td id="square9" onclick="colorToggle(id)" class=""><span id="9"></span></td>
		<td id="square13" onclick="colorToggle(id)" class=""><span id="13"></span></td>
		<td id="square18" onclick="colorToggle(id)" class=""><span id="18"></span></td>
		<td id="square23" onclick="colorToggle(id)" class=""><span id="23"></span></td>
	</tr>
	</tbody>

</table>

<div style="text-align:center;">
	<BUTTON onclick="randomC()" class="button1">随机填充</BUTTON>
	<BUTTON type="submit" onclick="generate()" class="button2">开始游戏</BUTTON>
</div>
<div class="tc" id='tc' style="display:none;">
	<div class="tankuang">
		<div id="header">
			<div id="header-right" onclick="hidder()">x</div>
			<select id="selectSM">
				　　　　
				　　</select>
			<BUTTON onclick="save_hidder()" class="saveS">OK</BUTTON>
		</div>
	</div>
</div>
<script>


</script>

<style>
	/* for button1 */
	#free{
		color: gold;
		background: url("/bingo/icon.png");
		background-repeat:no-repeat;
		transform: rotate(50deg);
		-webkit-transform: rotate(50deg);
	}
	#free span{
		display:inline-block;
		transform: rotate(-50deg);
		-webkit-transform: rotate(-50deg);
	}

	.pickedBG{
		color: gold;
		/*background: url("/bingo/icon.png");*/
		/*background-repeat:no-repeat;*/
		/*background-position: center center;*/

	}

	.bingo{
		/*color: gold;*/
		/*background: url("/bingo/icon.png");*/
		/*background-repeat:no-repeat;*/
		/*background-position: center center;*/

		color: gold;
		background: url("/bingo/icon.png");
		background-repeat:no-repeat;
		transform: rotate(50deg);
		-webkit-transform: rotate(50deg);
	}
	.bingo span{
		display:inline-block;
		transform: rotate(-50deg);
		-webkit-transform: rotate(-50deg);
	}

	.button1 {
		margin-top: 10px;
		padding: 1px 9px;
		font-size: 20px;
		text-align: center;
		cursor: pointer;
		outline: none;
		color: #fff;
		background-color: cadetblue;
		border: none;
		border-radius: 15px;
		box-shadow: 0 9px #999;
	}

	.button1:hover {background-color: cadetblue}

	.button1:active {
		background-color: cadetblue;
		box-shadow: 0 5px #666;
		transform: translateY(4px);
	}
	.button2 {
		margin-top: 10px;
		padding: 1px 9px;
		font-size: 20px;
		text-align: center;
		cursor: pointer;
		outline: none;
		color: #fff;
		background-color: #ff3333;
		border: none;
		border-radius: 15px;
		box-shadow: 0 9px #999;
	}

	.button2:hover {background-color: #cc0000}

	.button2:active {
		background-color: #3e8e41;
		box-shadow: 0 5px #666;
		transform: translateY(4px);
	}
	/* for button2 */
	table {
		border-collapse: collapse;
		width: 95%;
	}

	th {
		text-align: center;
		width: 90px;
		font-size: 26px;
	}

	td {
		border: 2px #f9d506 solid;
		text-align: center;
		width: 90px;
		height: 90px;
		font-size: 26px;
	}

	// . {
	   //  border-style: solid;
	   //  text-shadow: 2px 2px 5px #ccccb3;
	   //  background-color: #ffb380
	   // }
	/* for  */

	.heading{
		text-align: center;
		text-shadow: 2px 2px 20px white;
		background-color: #ff6600;
		font-size: 20px;
	}
	/* for heading */
	.tc{
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background:rgba(190,190,190,0.5);
	}
	.tankuang{
		position: relative;
		background: #fff;
		width: 80%;
		height: 150px;
		border-radius: 5px;
		margin: 50% auto;
	}
	#header{
		height: 40px;
		text-align: center;
	}
	#header-right{
		position: absolute;
		width: 35px;
		height: 35px;
		border-radius: 5px;
		background: red;
		color: #fff;
		right: 5px;
		top: 5px;
		font-size: 22px;
	}
	.saveS{
		position: absolute;
		width: 60px;
		height: 50px;
		top: 50px;
		right: 8%;
		font-size: 20px;
	}

	#selectSM{
		position: absolute;
		top: 50px;
		left: 26%;
		width: 120px;
		height: 50px;
		font-size: 23px;
	}
</style>




</body>
</html>
